<template>
  <view class="equipment-item" @tap="handleClick">
    <image
      :src="
        product.primaryImageUrl ||
        product.imageUrls[0] ||
        'https://www.tradingplatformapp.com/files/test.jpg'
      "
      mode="aspectFill"
    >
    </image>
    <!-- <image :src="'http://www.tradingplatformapp.com/files/test.jpg'" mode="aspectFill">
		</image> -->
    <view class="info">
      <text class="name">{{ product.productName }}</text>
      <text class="price">
        <text class="currency">¥</text>
        <text class="price-value">{{ product.price }}</text>
      </text>
    </view>
  </view>
</template>

<script>
export default {
  name: "ProductCard",
  props: {
    product: {
      type: Object,
      required: true,
    },
  },
  methods: {
    handleClick() {
      // 将商品数据编码后作为参数传递
      const productData = encodeURIComponent(JSON.stringify(this.product));
      uni.navigateTo({
        url: `/pages/product/detail?product=${productData}`,
      });
    },
  },
};
</script>

<style lang="scss">
.equipment-item {
  width: 100%;
  background: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  break-inside: avoid;
  margin-bottom: 20rpx;

  image {
    width: 100%;
    height: 300rpx;
    border-radius: 12rpx 12rpx 0 0;
    object-fit: cover;
  }

  .info {
    padding: 16rpx;

    .name {
      font-size: 28rpx;
      color: #333;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      line-height: 1.4;
    }

    .price {
      font-size: 32rpx;
      color: #ff6b6b;
      font-weight: bold;
      margin-top: 8rpx;

      .currency {
        font-size: 24rpx;
        margin-right: 4rpx;
      }
    }
  }
}
</style>
